<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 一对一服务：查询表单；查询按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">服务名称</label>
            <div class="layui-input-inline">
                <input id="input1" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询一对一服务" class="layui-btn">
        </div>
        <div class="layui-inline">
            <input id="addBtn" type="button" value="新增一对一服务" class="layui-btn">
        </div>
    </div>
</form>
<!-- 一对一服务表格 -->
<table id="table1"></table>

<!-- 状态切换模板 -->
<script id="ID-table-demo-templet-switch" type="text/html" th:inline="none">
    <input type="checkbox" name="status" value="{{=d.id }}" title="上架|下架" lay-skin="switch"
           lay-filter="demo-templet-status" {{=d.status== 0 ? "checked" : "" }} >
</script>
<!-- 一对一服务：表格操作模板 -->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
</script>
<!-- 一对一服务：编辑 弹出窗口的模板 -->
<script id="template3" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-inline">
                <label class="layui-form-label">服务名称</label>
                <div class="layui-input-inline">
                    <!-- 放置一个隐藏框 name="id" 可以被赋值
                        新增的时候id没有值 编辑的时候id有值 -->
                    <input type="hidden" name="id">
                    <input type="text" id="serviceName" name="serviceName" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务详情</label>
                <div class="layui-input-inline">
                    <input type="text" name="introduce" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务图片</label>
                <div class="layui-input-inline">
                    <!-- 选择文件并上传时，上传文件就已经完成了，并返回文件地址 -->
                    <img id="image" width="50ox" height="50px"/>
                    <!-- 点击保存时，保存到数据库的只是上传的文件的地址 -->
                    <input id="imageInput" type="hidden" name="image" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择服务状态</option>
                        <option value="0">上架</option>
                        <option value="1">下架</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>

<!-- 引入依赖的js文件 -->
<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    layui.use(['layer', 'form', 'table'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var table = layui.table;//操作表格
        var upload = layui.upload;//上传文件
        var $ = layui.jquery;//从layui中把jquery拿出来用

        //给保存按钮绑事件
        //事件委托 标签名选择器 id选择器：作用于整个<body><body/> 只要当前页面有saveBtn，就能保存
        $("body").on("click", "#saveBtn", function () {
            //获取表单中的所有数据 lay-filter="form1"
            var data = form.val("form1");
            if (!data.serviceName) {
                layer.msg("服务名称不能为空")
                return false;
            }
            if (!data.price) {
                layer.msg("服务价格不能为空")
                return false;
            }
            if (!data.introduce) {
                layer.msg("服务详情不能为空")
                return false;
            }
            if (!data.image) {
                layer.msg("服务首页图片不能为空")
                return false;
            }
            //把数据传到后台 Ajax异步请求
            //只有请求成功了，才进function！！！
            $.post("/admin/service/saveOne", data, function () {
                //关窗口
                layer.closeAll();
                //给成功提示
                layer.msg("保存成功");
                //再查一遍表格的数据（点一下查询按钮）
                $("#searchBtn").click();
            });
        });

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //渲染表格
            table.render({
                elem: "#table1",
                url: "/admin/service/oneToOne",
                cols: [[
                    //field中的属性名必须与User类中定义的成员变量名一致
                    {title: "ID", field: "id"},
                    {title: "服务名称", field: "serviceName"},
                    {title: "服务价格", field: "price"},
                    {title: "服务详情", field: "introduce"},
                    {title: "创建时间", field: "createTime"},
                    {title: "发布人", field: "createUserName"},
                    {
                        title: "服务类型", field: "type", templet: function (provider) {
                            return provider.type === '0' ? '普通服务' : '一对一服务'
                        }
                    },
                    {title: '状态', width: 150, templet: '#ID-table-demo-templet-switch'},
                    {title: "操作", templet: "#template2"}
                ]],
                where: {serviceName: $("#input1").val()},
                page: true,
                limits: [10, 15, 20],
                limit: 10
            });
        }).click();

        //给新增按钮绑定事件
        $("#addBtn").on("click", function () {
            //弹出窗口
            layer.open({
                title: "新增一对一服务",
                type: 1,
                area: ['400px', '400px'],
                content: $("#template3").html()
            });

            form.render();

            //渲染上传文件功能绑定的元素（图片/按钮···）
            upload.render({
                //渲染哪个元素，使之可以上传文件
                elem: "#image",
                //请求路径
                url: "/attachment/uploadOne",
                //上传完成后做什么
                done: function (res, index, upload) {
                    if (res.code === 0) {
                        //把保存的路径放到文本框里
                        $("#imageInput").val(res.data);
                        //在img里显示上传的图片 给id所指的标签加一个值，是文件上传的路径
                        $("#image").attr("src", res.data);
                    }
                }
            });
        });

        //给切换状态绑定事件
        form.on('switch(demo-templet-status)', function (obj) {
            console.log(obj.value);//要操作的商品的ID
            console.log(obj.elem.checked);//true就是正常用户，false就是停用
            $.post("/admin/service/oneToOneStatus", {id: obj.value, status: obj.elem.checked ? 0 : 1}, function () {
                layer.msg("更新状态成功");
            });
        });

        //给表格操作（编辑）绑事件
        table.on("tool", function (obj) {
            //定位行和列
            var event = obj.event;//obj内记录自定义的event值，用以区分不同操作
            var data = obj.data;//data表示该行所有数据  用以区别行

            //编辑
            if (event === "edit") {
                //先去后台获取当前服务的所有数据，取成功了，带着数据再弹窗
                $.get("/admin/service/getOne/" + data.id, function (service) {
                    //1.弹出窗口
                    layer.open({
                        title: "编辑一对一服务",
                        type: 1,
                        area: ['400px', '400px'],
                        content: $("#template3").html()
                    });

                    //渲染上传文件功能绑定的元素（图片/按钮···）
                    upload.render({
                        //渲染哪个元素，使之可以上传文件
                        elem: "#image",
                        //请求路径
                        url: "/attachment/uploadOne",
                        //上传完成后做什么
                        done: function (res, index, upload) {
                            if (res.code === 0) {
                                //把保存的路径放到文本框里
                                $("#imageInput").val(res.data);
                                //在img里显示上传的图片（给id所指的标签加一个值，是文件上传的路径）
                                $("#image").attr("src", res.data);
                            }
                        }
                    });

                    //2.把查到的service对象放进form表单中
                    //第一个参数：定位form表单；第二个参数：给form表单赋值
                    form.val("form1", service);
                })
            }

        });

    });
</script>


</body>
</html>
